<script setup>
import { onMounted, ref } from 'vue'
import Icon from '../Icon.vue'

defineProps(['type', 'str', 'withIcon'])
const visible = ref(false)

onMounted(() => visible.value = true)
setTimeout(() => visible.value = false, 3000)
</script>

<template>
  <Transition name="translate">
    <div @click="visible = false" class="pop-message" :class="type" v-show="visible">
      <Icon v-if="withIcon" :icon-name="type"></Icon>
      <span class="text">{{ str }}</span>
    </div>
  </Transition>
</template>

<style scoped lang="scss">
.pop-message {
  position: fixed;
  z-index: 9999;
  top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 8px;
  border-radius: 2 px;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, 0);
  box-shadow: 0px 5px 10px rgba(54, 83, 56, 0.3);
}

.translate-enter-active,
.translate-leave-active {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.translate-enter-from,
.translate-leave-to {
  transform: translate(-50%, -30px);
  opacity: 0;
}

.translate-enter-to,
.translate-leave-from {
  transform: translate(-50%, 0x);
  opacity: 1;
}

.text {
  margin: 5px 15px;
}

.warn {
  color: #e6a23c;
  background-color: #fdf6ec;
}

.error {
  color: #f56c6c;
  background-color: #fef0f0;
}

.success {
  color: #64ae40;
  background-color: #fefffd;
}
</style>